<template>
  <van-popup v-model:show="showBottom" round position="bottom" closeable>
    <div class="container">
      <div class="wrapper">
        <div class="show-list">
          <div
            class="show-item"
            :class="{ active: sessionActive == index }"
            v-for="(session, index) in sessions"
            :key="index"
            @click="changeSession(session, index)"
          >
            <div class="up">
              <div class="date">{{ session.sessionName }}</div>
              <div class="price">
                <span>￥</span>
                {{ session.sessionMinPrice }}
                <span>起</span>
              </div>
            </div>
            <div class="down">
              <div class="tag">
                <template v-for="tag in session.serviceNoteTags" :key="tag.sortNum">
                  {{ tag.noteName }}
                </template>
              </div>
            </div>
          </div>
        </div>

        <div class="ticket" v-if="showTicketNumber">
          <div class="header">
            <div class="title">选择数量</div>
            <!-- 连坐设置 -->
            <div class="adjacentSeat" v-if="isShow">
              <span>要求连坐</span>
              <van-switch
                v-model="isAdjacentSeat"
                active-color="rgb(255, 29, 65)"
                inactive-color="rgb(138, 138, 138)"
                @change="changeChecked"
              >
                <template #background>
                  <template v-if="isAdjacentSeat">
                    <span class="on">开</span>
                  </template>
                  <template v-else>
                    <span class="off">关</span>
                  </template>
                </template>
              </van-switch>
            </div>
          </div>
          <div class="count">
            <template v-for="(number, index) in sessions[sessionActive].limitation" :key="index">
              <div
                class="number"
                :class="{ active: numberActive == index }"
                @click="changeNumber(number, index)"
              >
                {{ number }}
              </div>
            </template>
          </div>
        </div>
      </div>
      <div class="confirm">
        <van-button type="primary" color="#ff1d41" @click="onConfirm"> 确定 </van-button>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { fetchTourSitePurchaseParams } from '@/api/index.js'
import { ref, onMounted, computed, watch, toRefs } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()

import { useStore } from '@/stores/index.js'
import router from '@/router'
const store = useStore()

const showId = computed(() => route.query.showId || store.purchaseInformation.showId)

const locationCityOID = computed(() => store.locationCity.locationCityOID)

const props = defineProps({
  //是否显示【数量选择】
  showTicketNumber: {
    type: Boolean,
    default: true,
  },
  sessionName: {
    type: String,
  },
  ticketNumber: {
    type: Number,
  },
  sessionId: {
    type: String,
  },
  adjacentSeat: {
    type: Boolean,
  },
  sessionActive: {
    type: Number,
  },
  numberActive: {
    type: Number,
  },
})

// const { showTicketNumber, sessionName, ticketNumber } = toRefs(props)

const showBottom = ref(false)

const sessions = ref([])

const sessionActive = ref(props.sessionActive ? props.sessionActive : 0)
const numberActive = ref(props.numberActive ? props.numberActive : 0)

const sessionId = ref(props.sessionId ? props.sessionId : '')
const sessionName = ref(props.sessionName ? props.sessionName : '')
const ticketNumber = ref(props.ticketNumber ? props.ticketNumber : 1)

// 在获取到sessions数据后，如果还没有默认值，则设置默认值
watch(sessions, (newSessions) => {
  if (newSessions && newSessions.length > 0) {
    // 如果没有传入sessionId，则使用第一个场次的id
    if (!props.sessionId && newSessions[sessionActive.value]) {
      sessionId.value = newSessions[sessionActive.value].sessionId
      sessionName.value = newSessions[sessionActive.value].sessionName
    }
  }
})

//是否显示连坐按钮
const isShow = ref(false)
//确认需要连坐
const isAdjacentSeat = ref(true)
// 暴露给父组件 ShowDetail的方法
const openPopup = () => {
  showBottom.value = true
}

defineExpose({
  openPopup,
})

onMounted(() => {
  getTourSitePurchaseParams(showId.value, locationCityOID.value)
})

const getTourSitePurchaseParams = async (showId, locationCityOID) => {
  try {
    const { statusCode, data } = await fetchTourSitePurchaseParams(showId, locationCityOID)
    if (statusCode === 200) {
      sessions.value = data
      console.log('sessions', sessions.value)
    }
  } catch (error) {
    console.log('获取演出站点参数失败', error)
  }
}

watch(showId, (newShowId, oldShowId) => {
  // console.log('getTourSiteRefundRule')
  if (newShowId && newShowId !== oldShowId) {
    getTourSitePurchaseParams(newShowId, locationCityOID.value)
  }
})

//更改场次
const changeSession = (session, index) => {
  console.log('typeof index:', typeof index)
  sessionActive.value = index
  console.log('changeSession', session)
  sessionId.value = session.sessionId
  sessionName.value = session.sessionName
}

//更改座位数
const changeNumber = (number, index) => {
  if (number >= 2) {
    isShow.value = true
  } else {
    isShow.value = false
  }

  ticketNumber.value = number
  numberActive.value = index
}
// 切换是否连坐
const changeChecked = (value) => {
  console.log(value)
  isAdjacentSeat.value = value
}

// 提交选座参数 (场次和座位数，连坐情况) 并进入详细选择页面
const onConfirm = () => {
  store.setPurchaseInformation(
    showId.value,
    sessionId.value,
    sessionName.value,
    ticketNumber.value,
    isAdjacentSeat.value,
  )

  //关闭
  showBottom.value = false

  router.push({
    path: '/pick-seat',
    query: { sessionActive: sessionActive.value, numberActive: numberActive.value },
  })
}
</script>

<style scoped lang="scss">
.container {
  position: relative;
  padding: 15px;

  .wrapper {
    position: relative;
    margin-bottom: 60px;

    .show-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-top: 40px;
      margin-bottom: 50px;

      .show-item {
        display: flex;
        flex-direction: column;
        border: 1px solid #eaeaea;
        border-radius: 10px;
        padding: 15px;
        gap: 5px;

        &.active {
          border-color: #ff1d41;
          background: #fffbfb;
        }

        .up {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .date {
            color: #323038;
            font-size: 14px;
            font-weight: 500;
          }

          .price {
            color: #ff1d41;
            font-size: 18px;
            font-weight: 700;

            span {
              font-size: 10px;
              font-weight: 400;
            }
          }
        }

        .down {
          font-size: 10px;
          color: #95949d;
        }
      }
    }

    .ticket {
      border-top: 1px solid #eaeaea;

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        margin-bottom: 15px;
        font-size: 14px;
        font-weight: 500;

        .title {
          font-size: 14px;
          font-weight: 500;
        }

        .adjacentSeat {
          font-size: 14px;
          font-weight: 400;
          display: flex;
          align-items: center;
          gap: 10px;

          .van-switch {
            display: flex;
            align-items: center;

            .on {
              font-size: 12px;
              color: #fff;
              padding: 0 6px 0;
            }

            .off {
              font-size: 12px;
              color: #fff;
              padding: 0 30px 0;
            }
          }
        }
      }

      .count {
        display: flex;
        align-items: center;
        gap: 10px;
        overflow-y: auto;

        //去掉横向滚动条
        &::-webkit-scrollbar {
          display: none;
        }

        scrollbar-width: none;
        -ms-overflow-style: none;

        .number {
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 10px;
          background-color: #f6f6f7;
          border: 1px solid transparent;
          font-size: 14px;
          font-weight: 600;
          color: #323038;
          padding: 15px 30px;

          &.active {
            border-color: #ff1d41;
            background: #fffbfb;
          }
        }
      }
    }
  }

  .confirm {
    z-index: 2;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 5px 15px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;

    .van-button {
      width: 100%;
      height: 44px;
      font-size: 16px;
      font-weight: 600;
      border-radius: 22px;
    }
  }
}
</style>
